<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item>
                    <i class='el-icon-lx-cascades'></i> 授课信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
                <el-select clearable v-model='query.semester' placeholder='学期' class='handle-select mr10'>
                    <template v-for='item in semesters'>
                        <el-option key='1' :label='item' :value='item'></el-option>
                    </template>
                </el-select>
                <el-select clearable v-model='query.courseName' placeholder='课程' class='handle-select mr10'>
                    <template v-for='item in courseNames'>
                        <el-option key='1' :label='item' :value='item'></el-option>
                    </template>
                </el-select>
                <el-button type='warning' icon='el-icon-lx-filter' @click='handleFilter' class='btn'></el-button>
                <div style='width: 20px; display: inline-block'></div>
                <el-input v-if='role === "supervisor"' v-model='query.teacherName' placeholder='教师姓名' class='handle-input mr10' style='width: 100px'></el-input>
                <el-button v-if='role === "supervisor"' type='warning' icon='el-icon-search' @click='handleFilter' class='btn'></el-button>
                <el-button type='warning' icon='el-icon-refresh' @click='load_status' style='position: absolute; right: 60px' class='btn'></el-button>
            </div>
            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column prop='teacherId' label='教师编号' width='105' align='center'></el-table-column>
                <el-table-column prop='teacherName' label='教师姓名' width='105' align='center'></el-table-column>
                <el-table-column prop='courseId' label='课程编号' width='105' align='center'></el-table-column>
                <el-table-column prop='courseName' label='课程名' width='105' align='center'></el-table-column>
                <el-table-column prop='classId' label='授课班级编号' width='105' align='center'></el-table-column>
                <el-table-column prop='time' label='课程学时' width='105' align='center'></el-table-column>
                <el-table-column prop='credit' label='课程学分' width='105' align='center'></el-table-column>
                <el-table-column prop='type' label='考试/考察' width='105' align='center'></el-table-column>
                <el-table-column prop='semester' label='学期'></el-table-column>
            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// import CodeDetail from '@/components/common/CodeDetail';
import Qs from 'qs'
export default {
    name: 'grade',
    data() {
        return {
            query: {
                studentName: '',
                teacherName: '',
                courseName: '',
                semester: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            semesters: [],
            courseNames: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    mounted:function(){
        this.load_status()
    },
    methods: {
        load_status() {
            let _this = this
            this.$axios.get('/semesters').then(resp => {
                if(resp && resp.status === 200) {
                    _this.semesters = resp.data
                }
            })
            if(this.role === 'supervisor') {
                this.$axios.get('/teachInfo').then(resp => {
                    if(resp && resp.status === 200) {
                        _this.tableData = resp.data
                    }
                })
                this.$axios.get('/course-names').then(resp => {
                    if(resp && resp.status === 200) {
                        _this.courseNames = resp.data
                    }
                })
            }
            else {
                let id = localStorage.getItem("ms_userid");
                let role = this.role
                // console.log(id)
                this.$axios.post('/teachInfo/filter', Qs.stringify({
                    "id": id,
                    "courseName": "",
                    "semester": "",
                    "type": role,
                    "teacherName": ""})).then(resp => {
                    if(resp && resp.status === 200) {
                        _this.tableData = resp.data
                    }
                })
                this.$axios.post('/course-names/' + role, Qs.stringify({"id": id}) ).then(resp => {
                    if(resp && resp.status === 200) {
                        _this.courseNames = resp.data
                    }
                })
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.$axios.get("/status/" + this.query.name + "/person").then(resp => {
                if(resp && resp.status === 200) {
                    this.tableData = resp.data
                }
            })
        },
        handleFilter() {
            this.$set(this.query, 'pageIndex', 1);
            let _this = this
            let semester = this.query.semester
            let courseName = this.query.courseName
            let id = localStorage.getItem("ms_userid");
            let role = this.role
            let studentName = this.query.studentName
            let teacherName = this.query.teacherName
            this.$axios.post('/teachInfo/filter', Qs.stringify({
                "id": id,
                "courseName": courseName,
                "semester": semester,
                "type": role,
                "teacherName": teacherName})).then(resp => {
                if(resp && resp.status === 200) {
                    _this.tableData = resp.data
                }
            })
        }
    },
    computed: {
        role() {
            return localStorage.getItem("ms_character");
        }
    },
    components: {
        // CodeDetail
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    /*font-size: 14px;*/
}

.mr10 {
    margin-right: 10px;
}

</style>
